<template>
  <div class="biz-container">
    <table-layout
      :haveSider="false"
      :isStandTable="false"
    >
      <template #headCustom>
        <a-button
          type="primary"
          @click="onBack"
        >返回</a-button>
        <a-button
          type="primary"
          style="marginLeft:20px"
          v-print="printObj"
        > 打印 </a-button>
        <div style="display:none">
          <print-html
            ref="print"
            id="print"
            :infoDatas="infoDatas"
            :BarCode="BarCode"
            :columns="columns"
            :listdata="listdata"
            :columns2="columns2"
            :listdata2="listdata2"
          ></print-html>
        </div>
      </template>
      <template #form>
        <div class="card">
          <div class="viewTitle">
            {{btn[0].name}}
            <a-button
              type="link"
              class="upAndDown"
              @click="upAndDown($event,0)"
            >
              <a-icon
                v-if="btn[0].isUp"
                type="up"
              />
              <a-icon
                v-else
                type="down"
              />
            </a-button>
          </div>
          <a-list-info
            v-show="btn[0].isUp"
            span="12"
            :infoDatas="infoDatas"
            :haveBarCode="true"
            :BarCode="BarCode"
          />
        </div>
        <div class="dis"></div>
        <div class="card">
          <div class="viewTitle">
            {{btn[1].name}}
            <a-button
              type="link"
              class="upAndDown"
              @click="upAndDown($event,1)"
            >
              <a-icon
                v-if="btn[1].isUp"
                type="up"
              />
              <a-icon
                v-else
                type="down"
              />
            </a-button>
          </div>
          <a-list-table
            v-show="btn[1].isUp"
            tableId="goodsTable"
            :columns="columns"
            :tableData="listdata"
            :haveChild="true"
            :pagination="pagination"
            :isExpandAllRows="false"
            :isSelecttion="false"
            :loading="loading"
            :scroll="{y:false}"
            :innerTable="innerTable"
          >
          </a-list-table>
        </div>
        <div class="dis"></div>
        <div class="card">
          <div class="viewTitle">
            {{btn[2].name}}
            <a-button
              type="link"
              class="upAndDown"
              @click="upAndDown($event,2)"
            >
              <a-icon
                v-if="btn[2].isUp"
                type="up"
              />
              <a-icon
                v-else
                type="down"
              />
            </a-button>
          </div>
          <a-list-table
            v-show="btn[2].isUp"
            tableId="invoicesTable"
            :columns="columns2"
            :tableData="listdata2"
            :pagination="pagination2"
            :isSelecttion="false"
            :loading="loading"
            :scroll="{y:false}"
          >
          </a-list-table>
        </div>

        <div style="textAlign:center;lineHeight:60px">
          <!-- <a-button type="primary" @click="onPrevious"  >上一步</a-button>
            <a-button type="primary" @click="onNext" style="marginLeft:20px" >提交</a-button> -->
        </div>
      </template>
    </table-layout>
  </div>
</template>

<script>
import searchLayout from '@/views/app/biz/common/searchLayout'
import batchOperatBtn from '@/views/app/biz/common/batchOperatBtn'
import tableLayout from '@/views/app/biz/common/index'
import aListInfo from '@/views/app/biz/common/aListInfo'
import aListTable from '@/views/app/biz/common/aListTable'
import basicForm from '../common/basicForm'
import printHtml from './printHtml.vue'
import storage from 'store'
import {
  getMergeOrder,
} from './saleDelivery'


export default {
  components: {
    searchLayout,
    batchOperatBtn,
    tableLayout,
    aListInfo,
    aListTable,
    basicForm,
    printHtml
  },
  data () {
    return {
      printObj: {
        id: "print",
        preview: false,//是否开启打印预览
        previewTitle: '打印预览', // The title of the preview window. The default is 打印预览
        popTitle: '配送单',
        extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback (vue) {
          console.log('正在加载预览窗口')
        },
        previewOpenCallback (vue) {
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback (vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback (vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback (vue) {
          console.log('关闭了打印工具')
        }
      },
      BarCode: null,
      btn: [
        { name: '配送单信息', isUp: true },
        { name: '配送单明细', isUp: true },
        { name: '发票信息', isUp: true }
      ],
      submitData: {},
      columns: [
        { title: '品名', dataIndex: 'productNameZh', key: 'productNameZh', align: 'center', },
        { title: '通用名', dataIndex: 'commonName', key: 'commonName', align: 'center' },
        { title: '生产企业名称', dataIndex: 'manufacturerZh', key: 'manufacturerZh', align: 'center', },
        { title: '规格', dataIndex: 'spec', key: 'spec', align: 'center' },
        // { title: '型号', dataIndex: 'model', key: 'model', align: 'center' },
        { title: '计量单位', dataIndex: 'measurement', key: 'measurement', align: 'center' },
        // { title: '需配送数量', dataIndex: 'num', key: 'num', align: 'center' ,scopedSlots: { customRender: 'num' }},
        { title: '单价(元)', dataIndex: 'iunitprice', key: 'iunitprice', align: 'center', scopedSlots: { customRender: 'tofixed2' } },
        { title: '批号', dataIndex: 'batchCode', key: 'batchCode', align: 'center' },
        { title: '生产日期', dataIndex: 'productDate', key: 'productDate', align: 'center' },
        { title: '有效期', dataIndex: 'expiryDate', key: 'expiryDate', align: 'center' },
        { title: '配送数量', dataIndex: 'num', key: 'num', align: 'center', scopedSlots: { customRender: 'num' } },
        { title: '总价(元)', dataIndex: 'totalPrice', key: 'totalPrice', align: 'center', scopedSlots: { customRender: 'totalPrice' } },
        { title: '状态', dataIndex: 'deliveryState', key: 'deliveryState', align: 'center' }
        // { title: '操作', dataIndex: 'action', key: 'operation', width: 180, align: 'center', scopedSlots: { customRender: 'action' }},
      ],
      listdata: [],
      loading: false,
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 100000, //每页显示条数 pageSize
        total: 1,
        // showQuickJumper: true,
        // showSizeChanger: true,
        // pageSizeOptions: ['2', '10', '50', '100'],
      },
      innerTable: {
        innerColumns: [
          { title: '销售单号', dataIndex: 'saleOrderNo', key: 'saleOrderNo', align: 'center', },
          { title: '客户采购单号', dataIndex: 'purOrderNo', key: 'purOrderNo', width: "10%", align: 'center', },
          { title: '品名', dataIndex: 'productNameZh', key: 'productNameZh', align: 'center', },
          { title: '通用名', dataIndex: 'commonName', key: 'commonName', align: 'center' },
          // { title: '生产企业名称', dataIndex: 'manufacturerZh', key: 'manufacturerZh', align: 'center', },
          { title: '规格', dataIndex: 'spec', key: 'spec', align: 'center' },
          // { title: '型号', dataIndex: 'model', key: 'model', align: 'center' },
          { title: '计量单位', dataIndex: 'measurement', key: 'measurement', align: 'center' },
          //   { title: '需配送数量', dataIndex: 'num', key: 'num', align: 'center' ,scopedSlots: { customRender: 'num' }},
          { title: '单价(元)', dataIndex: 'iunitprice', key: 'iunitprice', align: 'center', scopedSlots: { customRender: 'iunitprice' } },
          { title: '批号', dataIndex: 'batchCode', key: 'batchCode', align: 'center', scopedSlots: { customRender: 'batchCode' } },
          { title: '配送数量', dataIndex: 'num', key: 'num', align: 'center', scopedSlots: { customRender: 'num' } },
          { title: '生产日期', dataIndex: 'productDate', key: 'productDate', align: 'center', scopedSlots: { customRender: 'productDate' } },
          { title: '有效期', dataIndex: 'expiryDate', key: 'expiryDate', align: 'center', scopedSlots: { customRender: 'expiryDate' } },
          // { title: '操作', dataIndex: 'action', key: 'operation', width: 180, align: 'center', scopedSlots: { customRender: 'action' }},
        ],
        innerLoading: false,
      },
      columns2: [
        // { title: '结算单号', dataIndex: 'settlementNo', key: 'settlementNo', align: 'center' },
        { title: '买方单位', dataIndex: 'customerName', key: 'customerName', align: 'center' },
        // { title: '关联销售订单', dataIndex: 'saleOrderNo', key: 'saleOrderNo', align: 'center' },
        // { title: '买方税号', dataIndex: 'customerTaxNo', key: 'customerTaxNo', align: 'center' },
        // { title: '买方地址电话', dataIndex: 'customerAddrTell', key: 'customerAddrTell', align: 'center' },
        // { title: '买方银行账号', dataIndex: 'customerAccountNum', key: 'customerAccountNum', align: 'center' },
        // { title: '开具单位', dataIndex: 'supplierOrgName', key: 'supplierOrgName', align: 'center' },
        // { title: '开具单位税号', dataIndex: 'supplierTaxNo', key: 'supplierTaxNo', align: 'center' },
        // { title: '开具单位地址电话', dataIndex: 'supplierAddrTel', key: 'supplierAddrTel', align: 'center' },
        // { title: '开具单位银行账号', dataIndex: 'supplierAccountNum', key: 'supplierAccountNum', align: 'center' },
        { title: '发票种类', dataIndex: 'invoiceType', key: 'invoiceType', align: 'center' },
        { title: '发票号码', dataIndex: 'invoiceNo', key: 'invoiceNo', align: 'center' },
        { title: '发票代码', dataIndex: 'invoiceCode', key: 'invoiceCode', align: 'center' },
        // { title: '红票标志', dataIndex: 'redFlag', key: 'redFlag', align: 'center' },
        // { title: '无税总价', dataIndex: 'totalIunitprice', key: 'totalIunitprice', align: 'center' },
        { title: '含税总价', dataIndex: 'totalPrice', key: 'totalPrice', align: 'center', scopedSlots: { customRender: 'tofixed2' } },
        { title: '税率', dataIndex: 'tax', key: 'tax', align: 'center', scopedSlots: { customRender: 'percentage' } },
        // { title: '税额', dataIndex: 'taxes', key: 'taxes', align: 'center' },
        { title: '状态', dataIndex: 'invoiceState', key: 'invoiceState', align: 'center' },
        // { title: '操作', dataIndex: 'action', key: 'operation', width: 180, align: 'center', scopedSlots: { customRender: 'action' }},
      ],
      listdata2: [],
      pagination2: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 10, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['2', '10', '50', '100'],
      },
      infoDatas: [
        { title: '配送单号', id: 'deliveryOrderNo', value: '' },
        {},
        { title: '配送单名称', id: 'deliveryOrderName', value: '' },
        { title: '送货类型', id: 'deliveryType', value: '' },
        { title: '寄件人姓名', id: 'sender', value: '' },
        { title: '收件人姓名', id: 'receiver', value: '' },
        { title: '寄件人联系电话', id: 'senderTel', value: '' },
        { title: '收件人联系电话', id: 'receiverTel', value: '' },
        { title: '寄件地址', id: 'senderAddr', value: '' },
        { title: '收件地址', id: 'receiverAddr', value: '' },
        { title: '状态', id: 'deliveryState', value: '' },
        { title: '配送单金额', id: 'totalPrice', value: '', style: 'fontWeight:bolder', toFixed2: true },
        { title: '物流方', id: 'logistics', value: '' },
        { title: '物流单号', id: 'logisticsNumber', value: '' },
      ],
      // 查询表单绑定数据
      q_formDatas: {
        pid: null
      },
      backPathName: 'deliverOrderyManage'
    }
  },
  computed: {},
  mounted(){
    //刷新页面时读取缓存
    if (!this.$route.params.pid) {
      this.q_formDatas.pid= storage.get('dOrderPid')? storage.get('dOrderPid'):null
      this.getList(this.q_formDatas)
      console.log(storage.get('dOrderPid'));
    }
  },
  activated () {
    console.log('activated', this.$route);
    //如果传了值表示为重新点击进去的，需要初始化数据，如果未传值表示缓存在页签中，需路由配置keepAlive
    if (this.$route.params.pid) {
      this.backPathName = this.$route.params.pathName ? this.$route.params.pathName : this.backPathName 
      this.q_formDatas.pid = this.$route.params.pid
      storage.set('dOrderPid',this.$route.params.pid)
      this.getList(this.q_formDatas)
    }
  },
  methods: {
    onNext () {
      this.$emit('onNextStep')
    },
    onPrevious () {
      this.$emit('onPrevious')
    },
    upAndDown (e, num) {
      if (this.btn[num].isUp) {
        this.btn[num].isUp = false
      } else {
        this.btn[num].isUp = true
      }
    },

    onBack () {
      this.$router.push({
        name: this.backPathName,
        params: {
          isJump: false,
          pathName: this.$route.name,
          iscloseMul: true,
        }
      })
    },
    // 初始化查询时的数据列表
    async getList (params) {
      this.listdata = []
      this.listdata2 = []
      let res = ''
      res = await getMergeOrder(params, this.pagination)
      this.loading = false
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        const deliveryOrderDetails = res.data.deliveryOrderDetails
        const invoices = res.data.invoices
        const deliveryOrder = res.data.deliveryOrder
        for (let detailItem of deliveryOrderDetails) {
          for (const item of detailItem.child) {
            item.key = item.pid
          }
          this.listdata.push({
            key: detailItem.pid,
            ...detailItem,

          })
        }
        for (let item of invoices) {
          this.listdata2.push({
            key: item.pid,
            ...item,

          })
        }
        if (deliveryOrder) {
          this.BarCode = deliveryOrder.deliveryOrderNo
          this.printObj.popTitle = '配送单号:' + deliveryOrder.deliveryOrderNo
          for (const key in deliveryOrder) {
            for (const item of this.infoDatas) {
              if (key == item.id) {
                item.value = deliveryOrder[key]
              }
            }
          }
        }
      } else {
        this.listdata = []
        this.listdata2 = []
      }
      this.setPage()
    },
    setPage () {
      const pagination = { ...this.pagination }
      if (this.listdata.length) {
        pagination.total = this.listdata.length
      }
      this.pagination = pagination
      this.pagination.showTotal = (showTotal) => { return `共 ${showTotal} 条` }
    },
  },
}
</script>

<style>
.viewTitle {
  line-height: 30px;
  font-size: 16px;
  font-weight: bolder;
  color: #555;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}
.upAndDown {
  text-align: center;
}
.card {
  width: 100%;
  padding: 0 7px;
}
.dis {
  height: 15px;
  background-color: #f0f2f5;
}
</style>